<template>
    <div  id="movieList">
     
        <SearchBar :searchList="searchList" @search="getSearchData" ></SearchBar>
        <div class="movie-list">
            <div class="box" v-for="item in movieList" :key="item._id" @click="operateFun('detail',item._id)">
                <LazyImg :imghref="item.posterSrc"></LazyImg>
                <!-- <img :src="item.posterSrc" alt=""> -->
                 <div class="btn-column" >
                    <el-button size="mini" icon="el-icon-search" circle @click="operateFun('detail',item._id)"></el-button>
                    <el-button size="mini" type="primary" icon="el-icon-edit" circle @click.prevent.stop="operateFun('edit',item._id)"></el-button>
                    <el-button size="mini" type="warning" icon="el-icon-delete" circle @click.prevent.stop="operateFun('delete',item._id)"></el-button>
                 </div>
                <div class="m-info">
                    <p class="sub-title">{{item.title}}</p>
                    <i>{{item.score}}</i>
                </div>  
            </div>
            <div class="loading"></div>
        </div>
 </div>
 
</template>

<script>
import axiosEl from '@/utils/axios';
import SearchBar from '@/components/SearchBar.vue';
import LazyImg from '@/components/LazyImg.vue';


let searchList = [
  {
    label:'电影名字',
    name:'title'
  },{
      label:'类型',
      name:'movieType',
      type:'select',
      labelName:{
        label:'name',
        value:'id'
      },
      action:{
        method:'get',
        url:'/type/all'
      }
   },
   {
      label:'区域',
      name:'region',
      type:'select',
      labelName:{
        label:'cname',
        value:'cname'
      },
      action:{
        method:'get',
        url:'/region/all'
      } 
   },{
    label:'语言',
    name:'language',
    type:'select',
    labelName:{
        label:'language',
        value:'_id'
      },
    action:{
        method:'get',
        url:'/language/all'
      } 
   }]

export default {
    name:'movelist',
    data(){
        return {
            searchList:searchList,
            movieList:[],
            searchObj:{
                pageSize:30,
                pageIndex:1
            },
            totalPage:0
        }
    },
    components:{
        SearchBar,
        LazyImg
    },
    methods:{
         // 监听子组件给的数据
         getSearchData(sdata){
            this.searchObj.pageIndex = 1;
            this.movieList = [];

            this.searchObj = {...this.searchObj, ...sdata}
           
            this.getMovieList();
         },
       async getMovieList(){
          let resData  = await  axiosEl({
                method:'get',
                url:'/movie/list',
                params:this.searchObj
            })
            if(resData.code ==1) {
                console.log(resData.data);
                this.searchObj.pageIndex+=1;
                this.movieList = [...this.movieList,...resData.data];
                this.totalPage = resData.total;

            }
        },
        loadMore(){
          let loading = document.querySelector('.loading');
          var observer = new IntersectionObserver(([entry])=>{
              if(entry.isIntersecting){
                  console.log('被看到了');
                  if(this.searchObj.pageIndex>this.totalPage && this.totalPage!=0) {
                      // loading 隐藏
                      // observer 去掉监听
                      observer.unobserve(loading); // 取消监听
                      loading.remove();
                      
                      return;
                  }
                  
                  this.getMovieList()
              }
          })

          observer.observe(loading)
        },
     
        // 删除影片
        deleteFun(id) {

          this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(async ()=>{
          // 选项的形式
          let resData = await axiosEl({
                method:'delete',
                url:'/movie/delete',
                params:{
                  id
                }
            })
            if(resData.code==1) {
                // 刷新数据
                this.movieList = this.movieList.filter((item)=>{
                    return item._id!=id
                })
                this.$message({
                  type: 'success',
                  message: '删除成功!'
                });
            }

          }).catch(()=>{
            this.$message({
                type: 'warning',
                message: '删除取消!'
            });
          })

          },
        operateFun(tag,id){
           switch(tag){
              case 'detail':
                this.$router.push({
                  path:'/movie/detail',
                  query:{
                    id
                  }
                })
                break;
             case 'edit':
              this.$router.push({
                  path:'/movie/add',
                  query:{
                    id
                  }
                })
              break;
            case 'delete':
                this.deleteFun(id)
              break;
           }
        }
    },
    created(){
        // this.getMovieList()
    },
    mounted(){
        this.loadMore();
    }
}
</script>

<style lang="scss" scoped>
 .movie-list{
        margin-top: 20px;
        display: flex;
        justify-content: start;
        align-items: center;
        flex-direction: row;
        flex-wrap: wrap;
        
        div.box{
          width: calc((100% - 50px) / 6);
          margin-right: 10px;
          text-align: center;
          margin-bottom: 10px;
          transition: all 0.3s;
          cursor: pointer;
          position: relative;
          .btn-column {
            position: absolute;
            right: 5px;
            top: 5px;
            opacity: 0;
            transition: all 1s;
          }
          &:hover .btn-column {
            opacity: 1;
          }
          img{
            width: 100%;
            height: 200px;
            border: 1px solid red;
          }
          p{
            font-size: 12px;
            color:#003333;
          }
          .m-info {
            height: 60px;
            width: 100%;
            overflow: hidden;
          }
         .sub-title {
            height: 30px;
            line-height: 30px;
            overflow: hidden;
            text-overflow: ellipsis;   //省略号
            white-space: nowrap;  // 不换行
         }
          i{
            display: inline-block;
            font-weight: bold;
            color: #f99135;
            margin: 5px 0;
          }
          &:nth-child(6n){
            margin-right: 0;
          }
          &:hover{
            cursor: pointer;
            transform: scale(1.03);
          }
        }
      }
</style>